<template>
  <div>
    <el-card>
      <template #header>
        <h3>用户列表</h3>

        <el-button type="primary" link @click="router.push({ name: 'UsersAdd' })">添加</el-button>
      </template>
      <el-input v-model="searchValue">
        <template #prepend>
          <el-select style="width: 100px" v-model="searchField">
            <el-option value="username" label="用户名"></el-option>
            <el-option value="phone" label="手机"></el-option>
            <el-option value="email" label="邮箱"></el-option>
          </el-select>
        </template>
        <template #append>
          <el-button @click="search">搜索</el-button>
        </template>
      </el-input>
      <!-- 指定数据集合 -->
      <el-table :data="usersList">
        <!-- 定义表头 -->
        <el-table-column label="姓名" width="100" prop="username"></el-table-column>
        <el-table-column label="性别" width="80">
          <template #default="{ row }">{{ row.gender === '1' ? '男' : '女' }}</template>
        </el-table-column>
        <el-table-column label="手机" prop="phone"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column label="创建时间">
          <template #default="{ row }">{{ row.ctime }}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button
              type="primary"
              link
              @click="$router.push({ name: 'UsersEdit', query: { id: row._id } })"
              >编辑</el-button
            >
            <el-button type="danger" link @click="deleteUser(row._id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        small
        background
        layout="prev, pager, next"
        :total="usersCount"
        :page-size="pageSize"
        style="margin-top: 10px"
        v-model:current-page="currentPage"
      />
    </el-card>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';

import { ElMessage, ElMessageBox } from 'element-plus';
import { deleteUserByIdApi } from '@/api/users';
import { getUsersList } from './users';

const router = useRouter();

// 每页条数
const pageSize = ref(1);
// 当前页码
const currentPage = ref(1);
// 总条数
const usersCount = ref(0);
const usersList = ref([]);

// 搜索关键字
const searchValue = ref('');
// 搜索字段
const searchField = ref('username');

const getList = async (where = {}) => {
  const { list, count } = await getUsersList({
    page: currentPage.value,
    perPage: pageSize.value,
    ...where,
  });
  usersCount.value = count.value;
  usersList.value = list.value;
};
// 监听回调函数中所有的响应式数据，数据发生变化，函数执行
watch(
  currentPage,
  async () => {
    let where = {};
    if (searchValue.value) {
      where = { searchField: searchField.value, searchValue: searchValue.value };
    }
    getList(where);
  },
  {
    immediate: true,
  },
);
// 搜索
const search = async () => {
  if (searchValue.value === '') {
    ElMessage.error('查询条件不能为空');
    return;
  }
  let where = {};
  if (searchValue.value) {
    where = { searchField: searchField.value, searchValue: searchValue.value };
  }
  getList(where);
};

const deleteUser = async (id) => {
  await ElMessageBox.confirm('确定删除吗?', '确定删除吗?', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  });

  await deleteUserByIdApi(id);

  ElMessage.success('删除成功');
  // 删除完毕后执行 刷新数据
  let where = {};
  if (searchValue.value) {
    where = { searchField: searchField.value, searchValue: searchValue.value };
  }
  getList(where);
};
</script>
